<template>
    <el-container >
        <!--头部-->
        <el-header style=" font-size: 40px; background-color: rgb(37, 108, 155); color: #eee; line-height: 60px;">
            101工作日志管理系统
        </el-header>
        <el-container>
            <el-main class="Img">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="账号" prop="username">
                      <el-input type="username" v-model="ruleForm.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                      <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button style="background-color: rgb(37, 108, 155);" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                      <el-button style="background-color: rgb(37, 108, 155);" type="primary" @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
  export default {
      data() {
          return {
              ruleForm: {
                username: '',
                password: ''
              },
              rules: {
                  username: [
                      { required: true, message: '请输入账号', trigger: 'blur' },
                      { min: 3, max: 20, message: '账号长度在3到20个字符之间', trigger: 'blur' }
                  ],
                  password: [
                      { required: true, message: '请输入密码', trigger: 'blur' },
                      { min: 5, max: 20, message: '密码长度在5到20个字符之间', trigger: 'blur' }
                  ]
              }
          };
      },
      methods: {
          submitForm(formName) {
              this.$refs[formName].validate((valid) => {
                  if (valid) {
                      // 发送登录请求
                      this.$axios.post('/login', {
                          username: this.ruleForm.username,
                          password: this.ruleForm.password
                      }).then(response => {
                          if(response.data.code == 1){
                              // 假设登录成功后，后端返回一个token，这里将token存储到localStorage
                              localStorage.setItem('token', response.data.data);
                              this.$router.push('/log');
                          }else{
                             // 处理登录失败的情况
                             this.$message.error('登录失败，请检查账号和密码');
                          }  
                      }).catch(error => {
                          console.error('登录错误:', error);
                          this.$message.error('登录时发生错误，请稍后再试');
                      });
                  } else {
                      console.log('error submit!!');
                      return false;
                  }
              });
          },
          resetForm(formName) {
              this.$refs[formName].resetFields();
          }
      }
  };
  </script>
  <style scoped>
    .el-container {
    width: 100%;
    height: 100vh;
}
  .demo-ruleForm {
    position: absolute; 
    top: 50%;
    left: 35%; 
    transform: translate(-50%, -50%);
    width: 300px;
    background-color: #f4f4f4;
    border-radius: 10px; 
    box-shadow: 0 0 10px #63618a1a; 
    padding: 20px; 
   
  }
  .Img{
    width: 100%;
    height: 100%;
    background: url('../../assets/loginImage.jpg') center center no-repeat;
    background-size: cover;
  }
</style>